<template>

  <!--  筛选项-->
  <SearchForm
      v-show="isShowSearch"
      :searchColumns="searchColumns"
      v-model:searchParam="searchParam"
      @getTableList="getTableList"
  />

  <!-- 表格主体 -->
  <div class="card table-main">
    <!-- 表格头部 操作按钮 -->
    <div class="table-header">
      <div class="header-button-lf">
        <slot name="tableHeader"/>
      </div>
      <div class="header-button-ri">
        <slot name="toolButton">
          <el-button v-if="showToolButton('refresh')" :icon="Refresh" circle @click='getTableList'/>
          <el-button
              v-if="showToolButton('search') && searchColumns?.length"
              :icon="Search"
              circle
              @click="isShowSearch = !isShowSearch"
          />
          <el-tooltip effect="light" content="说明文档" placement="top">
            <el-button v-if="showToolButton('description')" :icon="InfoFilled" circle
                       @click="descriptionDrawerStore.showDescriptionFrom('view',description_keywords)"/>
          </el-tooltip>

          <el-tooltip effect="light" content="下载录制工具" placement="top">
            <el-link v-if="showToolButton('downloadIDE')" :icon="Download"
                     :underline="false"
                     :href="uiTestToolUrl"></el-link>
          </el-tooltip>
        </slot>
      </div>
    </div>

    <!--表格数据主体-->
    <slot name="table"></slot>

    <!-- 分页组件 -->
    <slot name="pagination">
      <!-- 分页组件 -->
      <el-pagination
          :background="true"
          v-if="pagination"
          v-model:current-page="pageable.pageNum"
          v-model:page-size="pageable.pageSize"
          :page-sizes="[10, 25, 50, 100]"
          :total="pageable.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="getTableList"
          @current-change="getTableList"
      ></el-pagination>
    </slot>

<!-- 描述说明组件-->
    <MavonEditor></MavonEditor>
  </div>
</template>

<script setup>


import {InfoFilled, Refresh, Search,Download} from "@element-plus/icons-vue";
import {inject, ref, watch} from "vue";
import SearchForm from "./SearchForm.vue";
import {useDescriptionDrawerStore} from "@/stores/modules/system/descriptionDrawer.js";
import MavonEditor from "@/components/MavonEditor/index.vue";

const descriptionDrawerStore = useDescriptionDrawerStore()


const props = defineProps({
  searchColumns: {
    type: Array,
    default: []
  },

  // 按钮展示
  toolButton: {
    default: ["refresh", "search", "description"]
  },
  description_keywords: {
    type: String
  },
  // 是否展示分页
  pagination: {
    default: true
  },
})

const emit = defineEmits(["getTableList", "update:pageable"]);

const isShowSearch = ref(true)
const searchParam = ref({})

// 控制 ToolButton 显示
// "refresh" | "setting" | "search" | "description"
const showToolButton = (key) => {
  return Array.isArray(props.toolButton) ? props.toolButton.includes(key) : props.toolButton;
};

const pageable = ref({
  // 当前页数
  pageNum: 1,
  // 每页显示条数
  pageSize: 10,
  // 总条数
  total: 0
})


const getTableList = () => {
  emit("getTableList", {...pageable.value, ...searchParam.value})
}

defineExpose({
  pageable
})

const baseURL = import.meta.env.VITE_API_URL

const uiTestToolUrl = ref(baseURL + "/static/default/ui/9a93391f84e2410f985874a9360b0832.crx")
</script>


<style lang="scss">

</style>
